<template>
	<view class="page">
		<view class="form-box">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<up-form labelPosition="left" :model="formState" label-width="100" :rules="rules" ref="formRef"
				errorType="border-bottom">
				<up-form-item label="姓名" prop="name" borderBottom required>
					<up-input v-model="formState.name" border="none"></up-input>
				</up-form-item>
				<up-form-item label="性别" prop="sex" borderBottom :required="formState.payStatus.length==1" @click="showSex = true">
					<up-input v-model="formState.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></up-input>
					<template #right>
						<up-icon name="arrow-right"></up-icon>
					</template>
				</up-form-item>
				<u-form-item prop="payStatus" label="已收款" >
					<u-checkbox-group v-model="formState.payStatus" @change="onChangePayStatus">
						<u-checkbox label="" :name="1"></u-checkbox>
					</u-checkbox-group>
				</u-form-item>
			</up-form>
		</view>
		<view class="bottom">
			<up-button type="primary" @click="submit()">提 交</up-button>
		</view>
		<!-- 选择 -->
		<up-action-sheet :show="showSex" :actions="actions" title="请选择性别" description="如果选择保密会报错"
			@close="showSex = false" @select="sexSelect">
		</up-action-sheet>
		<up-toast ref="uToastRef"></up-toast>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	onLoad((options) => {
		console.log('options', options);
	})
	// 使用 ref 创建响应式引用  
	const formRef = ref(null);
	const formState = reactive({
		name: '',
		sex: '',
		payStatus:'',
	})
	const rules = ref({
		name: {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change'],
		},
		sex: {
			type: 'string',
			max: 1,
			required: true,
			message: '请选择男或女',
			trigger: ['blur', 'change'],
		},
	})
	const showSex = ref(false);
	const actions = ref([{
			name: '男'
		},
		{
			name: '女'
		},
		{
			name: '保密'
		},
	]);
	// 定义方法  
	const sexSelect = (e) => {
		formState.sex = e.name;
		if (formRef.value) {
			formRef.value.validateField('sex');
		}
	}
	const onChangePayStatus = (e) => {
		console.log('状态', e,formState.payStatus)
		if(e.length == 0){
			rules.value ={
				name: {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change'],
				},
				sex: {
					type: 'string',
					max: 1,
					required: false,
					message: '请选择男或女',
					trigger: ['blur', 'change'],
				},
			};
		}else{
			rules.value ={
				name: {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change'],
				},
				sex: {
					type: 'string',
					max: 1,
					required: true,
					message: '请选择男或女',
					trigger: ['blur', 'change'],
				},
			};
		}
	};

	function submit() {
		console.log('提交', formState);
		formRef.value.validate().then(valid => {
			if (valid) {
				uni.$u.toast('校验通过')
			} else {
				uni.$u.toast('校验失败')
			}
		}).catch(() => {
			// 处理验证错误  
			uni.$u.toast('校验失败')
		});
	}
</script>

<style lang="scss" scoped>
	.form-box {
		background-color: #FFFFFF;
		padding: 15px;
	}

	.bottom {
		position: absolute;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
		padding: 10px 15px;
		text-align: center;
		display: flex;
		box-sizing: border-box;
		width: 100%;
	}
</style>